<template>
  <div class="home">
    <div class="splitter-container">
      <el-splitter>
        <el-splitter-panel size="40%" :resizable="false">
          <div class="demo-panel">欢迎进入区块链跨境电商</div>
        </el-splitter-panel>
        <el-splitter-panel size="60%" :resizable="false">
          <div class="demo-panel">
            <!-- 登录表单默认显示，不再需要初始选择按钮 -->
            
            <!-- 登录表单 -->
            <div v-if="authMode === 'login'" class="auth-form">
              <h3>用户登录</h3>
              <el-form :model="loginForm" label-width="80px">
                <el-form-item label="账号">
                  <el-input v-model="loginForm.accountId" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="角色">
                  <el-select v-model="loginForm.role" placeholder="请选择角色">
                    <el-option label="生产商" value="manufacturer" />
                    <el-option label="经销商" value="seller" />
                    <el-option label="物流商" value="logistics" />
                    <el-option label="消费者" value="buyer" />
                    <el-option label="管理员" value="admin" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleLogin">登录</el-button>
                  <el-button @click="showRegister">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
            
            <!-- 注册表单 -->
            <div v-if="authMode === 'register'" class="auth-form">
              <h3>用户注册</h3>
              <el-form :model="registerForm" label-width="80px">
                <el-form-item label="账号">
                  <el-input v-model="registerForm.accountId" placeholder="请输入账号" maxlength="12" show-word-limit />
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" />
                </el-form-item>
                <el-form-item label="角色">
                  <el-select v-model="registerForm.role" placeholder="请选择角色">
                    <el-option label="生产商" value="manufacturer" />
                    <el-option label="经销商" value="seller" />
                    <el-option label="物流商" value="logistics" />
                    <el-option label="消费者" value="buyer" />
                  </el-select>
                </el-form-item>
                <el-form-item label="资质信息">
                  <el-input v-model="registerForm.qualification"  placeholder="请输入资质信息" />
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="handleRegister">注册</el-button>
                  <el-button @click="showLogin">返回登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-splitter-panel>
      </el-splitter>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '../stores/auth'
import ApiService from '../services/api'

export default {
  name: 'HomeView',
  setup() {
    const authStore = useAuthStore()
    return { authStore }
  },
  data() {
    return {
      authMode: 'login', // 默认为登录界面
      loginForm: {
        accountId: '',
        password: '',
        role: ''
      },
      registerForm: {
        accountId: '',
        password: '',
        confirmPassword: '',
        role: '',
        qualification: ''
      }
    }
  },
  methods: {
    showLogin() {
      this.authMode = 'login'
    },
    showRegister() {
      this.authMode = 'register'
    },
    cancelAuth() {
      this.authMode = 'login' // 返回登录界面而不是初始选择
      this.loginForm = { accountId: '', password: '', role: '' }
      this.registerForm = { accountId: '', password: '', confirmPassword: '', role: '', qualification: '' }
    },
    async handleLogin() {
      if (!this.loginForm.accountId || !this.loginForm.password || !this.loginForm.role) {
        alert('请填写完整信息')
        return
      }
      
      try {
        const apiService = new ApiService(this.loginForm.role)
        const result = await apiService.login(this.loginForm.accountId, this.loginForm.password)
        
        if (result.message === '登录成功') {
          this.authStore.setLogin(this.loginForm.accountId, this.loginForm.role)
          // 跳转到对应角色界面
          this.$router.push(`/${this.loginForm.role}`)
        } else {
          alert(result.message)
        }
      } catch (error) {
        alert('登录出错')
        console.error('登录错误:', error)
      }
    },
    async handleRegister() {
      if (!this.registerForm.accountId || !this.registerForm.password || !this.registerForm.role) {
        alert('请填写完整信息')
        return
      }
      
      // 验证账号长度不超过12个字符
      if (this.registerForm.accountId.length > 12) {
        alert('账号长度不能超过12个字符')
        return
      }
      
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        alert('两次密码输入不一致')
        return
      }
      
      try {
        const apiService = new ApiService(this.registerForm.role)
        const result = await apiService.register(
          this.registerForm.accountId,
          this.registerForm.password,
          this.registerForm.confirmPassword,
          this.registerForm.qualification
        )
        
        alert(result.message)
        if (result.message === '注册成功') {
          // 注册成功后清空表单并回到初始状态
          this.cancelAuth()
        }
      } catch (error) {
        alert('注册出错')
        console.error('注册错误:', error)
      }
    }
  }
}
</script>

<style scoped>

.home {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 分隔面板容器 */
.splitter-container {
  width: 100%;
  max-width: 800px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px var(--el-border-color-light);
  border: 1px solid var(--el-border-color-light);
}

/* 确保分隔面板组件正确显示 */
.splitter-container .el-splitter {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* 面板内容区域 */
.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: white;
  padding: 1rem;
  overflow-y: auto;
  width: 100%;
}

/* 登录/注册按钮区域 */
.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.auth-buttons .el-button {
  width: 250px;
  height: 50px;
  font-size: 18px;
}

/* 登录注册表单 */
.auth-form {
  width: 100%;
  height: 100%;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-form h3 {
  color: var(--text-primary);
  margin-bottom: 2rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 24px;
}

/* 表单元素样式 */
.auth-form .el-form {
  width: 100%;
  max-width: 500px;
}

.auth-form .el-form-item {
  margin-bottom: 20px;
  width: 100%;
}

.auth-form .el-form-item__label {
  padding: 0 10px 0 0;
  min-width: 80px;
  font-size: 16px;
}

.auth-form .el-input,
.auth-form .el-select {
  width: 100%;
  max-width: 400px;
}

.auth-form .el-textarea {
  width: 100%;
  max-width: 400px;
  max-height: 120px;
}

/* 按钮样式 */
.auth-form .el-button {
  padding: 12px 24px;
  font-size: 16px;
  margin-right: 10px;
}

.auth-form .el-button--primary,
.auth-form .el-button--success {
  min-width: 120px;
}

/* 美化按钮 */
.el-button--primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.el-button--success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s ease;
}

.el-button--success:hover {
  background-color: #5daf34;
  border-color: #5daf34;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
}

/* 表单样式优化 */
.el-form-item__label {
  color: var(--text-primary);
  font-weight: 500;
}

.el-input__wrapper {
  border-color: var(--border-color);
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.el-input__wrapper:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.el-input__wrapper.is-focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home {
    padding: 1rem;
  }
  
  .auth-form {
    padding: 1.5rem;
    margin-top: 1rem;
  }
  
  .el-col {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .el-row > .el-col {
    --el-col-offset: 0 !important;
  }
  
  .auth-buttons {
    flex-direction: column;
  }
}
</style>